<template>
    <div>
        <div>
            <div style="display: flex">
                <div style="margin-right: 10px;color: #2d8cf0">
                    <i class="bk-icon icon-pc"></i>
                </div>
                <div>
                    <span> ⾸⻚ </span>
                </div>
            </div>
            <div style="margin-top: 20px;display: flex">
                <div style="width: 300px">
                    <bk-input :clearable="true"></bk-input>
                </div>
                <div>
                    <bk-button :theme="'primary'" class="mr10">搜索</bk-button>
                </div>
            </div>
        </div>
        <div style="margin-top: 15px; ">
            <div style="border: 1px solid #dfe0e5;height: 42px;border-bottom: 0;background-color: #f5f7fa">
                <div style="display: flex;margin-top: 10px;margin-left:
12px">
                    <div style="margin-right: 10px;color: #2d8cf0">
                        <i class="bk-icon icon-dialogue"></i>
                    </div>
                    <div>
                        <span> 消息列表 </span>
                    </div>
                    <div style="margin-left:auto;margin-right: 10px">
                        <bk-switcher v-model="tableShow" theme="primary">
                        </bk-switcher>
                    </div>
                </div>
            </div>
            <div v-if="tableShow">
                <bk-table
                    :data="data"
                    :size="'small'"
                    :show-header="false">
                    <bk-table-column label="内容" prop="content"></bk-table-column>
                    <bk-table-column label="状态" prop="status" width="30">
                        <template slot-scope="props">
                            <div v-if="props.row.status === 'success'"
                                style="color: green">
                                <i class="bk-icon icon-check-circleshape"></i>
                            </div>
                            <div v-else style="color:red;">
                                <i class="bk-icon icon-close-circleshape"></i>
                            </div>
                        </template>
                    </bk-table-column>
                    <bk-table-column label="详情" width="50">
                        <template slot-scope="props">
                            <div v-if="props.row.status.length > 0"
                                style="color: #2d8cf0" @click="showDetail(props.row)">
                                <i class="bk-icon icon-order"></i>
                            </div>
                        </template>
                    </bk-table-column>
                </bk-table>
            </div>
            <div v-else>
                <div style="border: 1px solid #dfe0e5;height: 60px">
                    <div style="display: flex;display: -webkitflex;justify-content: center; align-items: center;margin-top: 20px">
                        <div style="color: #2d8cf0;margin-right: 10px">
                            <i class="bk-icon icon-dialogue"></i>
                        </div>
                        <div style="">
                            <span>Hello,你有{{data.length}}条消息</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <bk-dialog v-model="showDialog"
                theme="primary"
                :mask-close="false"
                :header-position="'left'">
                <span>{{detail}}</span>
            </bk-dialog>
        </div>
    </div>

</template>

<script>
    export default {
        name: 'index',
        data () {
            return {
                data: [{
                    content: '1、你的"20181212112308"单据已通过',
                    status: 'success',
                    detail: '你的"20181212112308"单据已通过(9⽉7⽇)'
                }, {
                    content: '2、你的"20181212112308"单据被驳回',
                    status: 'error',
                    detail: '你的"20181212112308"单据被驳回(9⽉6⽇)'
                }],
                tableShow: true,
                showDialog: false,
                detail: ''
            }
        },
        methods: {
            showDetail (row) {
                this.showDialog = true
                this.detail = row.detail
            }
        }
    }
</script>

<style scoped>

</style>
